<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>工作台</title> 

<link href="__CSS__/base.css" rel="stylesheet">
<link rel="stylesheet" href="__PUBLIC__/custom/uimaker/easyui.css">
<link rel="stylesheet" href="__CSS__/workbench.css">
<style type="text/css">
#wrapper{
    width:298px;
    height:231px;
    position:relative;
    color:#fff;
    text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;    
}

#slider-wrap{
    width:298px;
    height:231px;
    position:relative;
    overflow:hidden;
}

#slider-wrap ul#slider{
    width:100%;
    height:100%;
    
    position:absolute;
    top:0;
    left:0;  
    padding: 0!important;   
}

#slider-wrap ul#slider li{
    float:left;
    position:relative;
    width:298px;
    height:231px; 
    padding: 0!important;  
    list-style: none;
}

#slider-wrap ul#slider li > div{
    position:absolute;
    top:0;
    left:0; 
    width: 298px;
    text-indent: 1em; 
    background:rgba(255,255,255,0.5);

}

#slider-wrap ul#slider li > div h3{
    font-size:20px;
    text-transform:uppercase;  
    color: #000; 
}

#slider-wrap ul#slider li > div span{
    font-family: Neucha, Arial, sans serif;
    font-size:10px;
    background: none;
}

#slider-wrap ul#slider li i{
    text-align:center;
    line-height:231px;
    display:block;
    width:100%;
    font-size:90px; 
}


/*btns*/
.btns{
    position:absolute;
    width:50px;
    height:60px;
    top:50%;
    margin-top:-25px;
    line-height:57px;
    text-align:center;
    cursor:pointer; 
    background:rgba(0,0,0,0.1);
    z-index:100;
    
    
    -webkit-user-select: none;  
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -ms-user-select: none;
    
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.btns:hover{
    background:rgba(0,0,0,0.3); 
}

#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
    top: 10px; 
    right:10px; 
    width:auto;
    position:absolute;
}

#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}


/*bar*/
#bd .item-box #pagination-wrap{
    min-width:20px;
    margin-top:205px;
    margin-left: auto; 
    margin-right: auto;
    height:15px;
    position:relative;
    text-align:center;
}

#bd .item-box #pagination-wrap ul {
    width:100%;  
}

#bd .item-box #pagination-wrap ul li{
    margin: 0 4px;
    display: inline-block;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#fff;
    opacity:0.5;
    position:relative;
    top:0;
    padding: 0; 
}

#bd .item-box #pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
    opacity:1;
    box-shadow:rgba(0,0,0,0.1) 1px 1px 0px; 
}

/*Header*/
h1, h2{text-shadow:none; text-align:center;}
h1{ color: #666; text-transform:uppercase;  font-size:36px;}
h2{ color: #7f8c8d; font-family: Neucha, Arial, sans serif; font-size:18px; margin-bottom:30px;} 

/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
    -webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    -moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    -o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    -ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
    transition: all 0.3s cubic-bezier(1,.01,.32,1); 
}

</style>
</head> 
<body>

    <div class="container">
        <div id="hd">
            
        </div>

        <div id="bd">
            <div class="bd-content">
                <div class="right-zone">
                    <div class="inform item-box">
                        <div id="slider-wrap">
                              <ul id="slider">

                                <volist name="game" id="vo">
                                <notempty name="vo.poster">
                                    <li style="background:url(' <{:C("WEBHOME")}><{$vo.poster}>') no-repeat center center;background-size: auto 100% ">
                                    <div>
                                        <h3><{$vo.game}></h3>
                                    </div>
                                    <i class="fa fa-gears"></i>
                                 </li>
                                 </notempty>
                                </volist>
                                 
                              </ul>
                               <!--controls-->
                              <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
                              <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
                              <div id="counter"></div>
                              
                              <div id="pagination-wrap">
                                <ul>
                                </ul>
                              </div>
                              <!--controls-->  
                            </div>

                    </div>
                    <div class="price item-box" style="overflow: hidden;">
                        <div class="inform-hd">
                            <label>应用列表</label>
                        </div>
                        <ul style="height: 238px;overflow-y:scroll;">
                            <volist name="app" id="vo">
                                <li>
                                    <span></span>
                                    <a href="<{:U('App/appDetial')}>/appid/<{$vo.appid}>" class="ellipsis"><{$vo.app}></a>
                                    <a href="<{:U('App/appDetial')}>/appid/<{$vo.appid}>" class="ellipsis" style='font-size: 12px;width: 36px;color: #1da028'>查看></a>
                                </li>
                            </volist>
                        </ul>
                    </div>

                    <div class="price item-box" style="overflow: hidden;">
                        <div class="inform-hd">
                            <label>游戏列表</label>
                        </div>
                        <ul style="height: 238px;overflow-y:scroll;">
                            <volist name="game" id="vo">
                                <li>
                                    <span></span>
                                    <a href="<{:U('Game/gameDetial')}>/gameid/<{$vo.gameid}>" class="ellipsis"><{$vo.game}></a>
                                    <a href="<{:U('Game/gameDetial')}>/gameid/<{$vo.gameid}>" class="ellipsis" style='font-size: 12px;width: 36px;color: #1da028'>查看></a>
                                </li>
                            </volist>
                        </ul>
                    </div>
                    <!-- <div class="attached item-box" style="overflow: hidden;">
                        <div class="inform-hd">
                            <label>游戏列表</label>
                           <a href="<{:U('Game/index')}>">更多<span>&gt;</span></a> -->

                       <!--  </div>
                        <ul class="public-attached" style="height: 239px;overflow-y:scroll; ">
                            <volist name="game" id="vo" offset="1" length='8'>
                            <li>
                                <span></span>
                                <a href="<{:U('Game/gameDetial')}>/gameid/<{$vo.gameid}>"  class="ellipsis"><{$vo.game}></a> -->
                                <!-- <label>04-13</label> -->
                     <!--        </li>
                            </volist>
                        </ul>

                    </div> --> 
                </div>
                <div class="center-part">
                    <div class="center-items todo">
                        <div class="calendar-part">
                             <div class="easyui-calendar" style="width:205px;height:231px;"></div>
                        </div>
                        <ul class="work-items clearfix">
                            <li>
                                <div class="work-inner">
                                    <div class="work-item green">
                                        <i class="iconfont" style="left: 11px;">&#xe69e;</i>
                                        <span class="num"><strong id='game'></strong> <span class="unit">款</span></span>
                                        <label>游戏</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item red">
                                         <i class="iconfont">&#xe63f;   </i>
                                        <span class="num"><strong id='app'></strong> <span class="unit">款</span></span>
                                        <label>应用</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item yellow">
                                         <i class="iconfont">&#xe6bf;</i>
                                        <span class="num"><strong id='computer'></strong> <span class="unit">台</span></span>
                                        <label>服务器</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item blue">
                                         <i class="iconfont">&#xe6c1;</i>
                                        <span class="num"><strong id='gcomputer'></strong> <span class="unit">台</span></span>
                                        <label>虚拟机</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item purple">
                                         <i class="iconfont">&#xe688;</i>
                                        <span class="num"><strong id='item'></strong> <span class="unit">款</span></span>
                                        <label>道具</label>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="work-inner">
                                    <div class="work-item gray">
                                         <i class="iconfont">&#xe6d1;</i>
                                        <span class="num"><strong id='user'></strong> <span class="unit">人</span></span>
                                        <label>用户</label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="center-items chart0 clearfix">
                        <div class="chart0-item" style="width: 30%;">
                            <div class="item-inner">
                                <div class="item-content">
                                    <div class="content-hd">各类型游戏数量</div>
                                    <div class="chart-chart" id="chart0"></div>
                                </div>
                            </div>
                        </div>
                        <div class="chart0-item" style="width: 70%;">
                            <div class="item-inner">
                                <div class="item-content">
                                    <div class="content-hd">七天充值流水图</div>
                                    <div class="chart-chart" id="chart1"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-items chart1">
                        <div class="chart1-inner">
                             <div class="item-hd">虚拟机数量</div>
                             <div class="chart1-chart" id="chart3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="ft"></div>
    </div>


    <script type="text/javascript" src="__PUBLIC__/custom/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/custom/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="__JS__/slide.js"></script>
    <script type="text/javascript" src="__JS__/echarts-all.js"></script>


    
    <script type="text/javascript">
    //chart0

    $(document).ready(function(){
        shuliang();
        var option0 = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                show:false
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true, 
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'center',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'游戏数量',
                    type:'pie',
                    radius : ['50%', '70%'],
                    itemStyle : {
                        normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true,
                                position : 'center',
                                textStyle : {
                                    fontSize : '20',
                                    fontWeight : 'bold'
                                }
                            }
                        }
                    },
                    data:[
                        <?php
                        foreach ($bingtu as $k => $v) {
                            echo "{value:".$bingtu[$k]['gnum'].", name:'".$bingtu[$k]['type']."'},";
                        }
                        ?>
                    ]
                }
            ]
        };

      var myChart0 = echarts.init(document.getElementById('chart0'));
      myChart0.setOption(option0);


      //chart1
     var option1 = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
                show:false
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                   
                    data : [
                        <?php
                            foreach ($time as $k => $v) {
                                echo "'".$v."',";
                            }
                        ?>
                    ]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'充值次数',
                    type:'line',
                    stack: '总次数',
                    // data:[120, 132, 101, 134, 90, 230, 210]
                    data:[<{$liu}>]

                },
                // {
                //     name:'联盟广告',
                //     type:'line',
                //     stack: '总量',
                //     data:[220, 182, 191, 234, 290, 330, 310]
                // },
                // {
                //     name:'视频广告',
                //     type:'line',
                //     stack: '总量',
                //     data:[150, 232, 201, 154, 190, 330, 410]
                // },
                // {
                //     name:'直接访问',
                //     type:'line',
                //     stack: '总量',
                //     data:[320, 332, 301, 334, 390, 330, 320]
                // },
                // {
                //     name:'搜索引擎',
                //     type:'line',
                //     stack: '总量',
                //     data:[820, 932, 901, 934, 1290, 1330, 1320]
                // }
            ]
        };
        var myChart1 = echarts.init(document.getElementById('chart1'));
        myChart1.setOption(option1);

        var option3 = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['蒸发量'],
                show:false
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    // data : ['采购组织','供应商','新物料','uimaker','信息管理','业务系统','采购商']
                    data : [
                        <?php
                        foreach ($computer as $k => $v) {
                            echo "'".$computer[$k]['title']."',";
                        }
                        ?>
                    ]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'虚拟机数量',
                    type:'bar',
                    // data:[60, 45, 73],
                    data:[
                    <?php
                         foreach ($computer as $k => $v) {
                            echo "'".$computer[$k]['cnum']."',";
                        }
                    ?>
                    ],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    // markLine : {
                    //     data : [
                    //         {type : 'average', name: '平均值'}
                    //     ]
                    // }
                }
            ]
        };

        var myChart3 = echarts.init(document.getElementById('chart3'));
        myChart3.setOption(option3);         
          
        //我的待办点击事件
        $(document).on('click','.work-item.green',function(event){
            var width = (2 * $(this).width()) + 10;
            $(".todo-panel").width(width -2).css({top:$(this).offset().top,left:$(this).offset().left}).show();
            event.stopPropagation();
        });  
        $(".todo-panel").click(function(){
             event.stopPropagation();
        });    
        $(document).click(function(){
            $(".todo-panel").hide();
        });      

    });
        
    //公开附件tab事件处理
    $(".attached-tab").on("click","a",function(){
        $(this).closest(".attached-tab").find("a").removeClass("current");
        $(this).addClass("current");
        $(this).closest(".attached").find("ul").addClass("hide");   
        $(this).closest(".attached").find("ul." + $(this).attr("attached")).removeClass("hide");    
    });


    function shuliang(){
        $.ajax({
            url:"<{:U('Index/shuliang')}>",
            success:function(result){
                $('#game').html(result.game);
                $('#app').html(result.app);
                $('#computer').html(result.computer);
                $('#gcomputer').html(result.game_server);
                $('#item').html(result.item);
                $('#user').html(result.user);
            }
        })
    }


 
    </script>
</body> 
</html>
